<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>React的State</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
     <div id = "example"></div>
	<script type="text/babel">

	  //state 的三个注意点
      //不要直接修改状态
      //状态更新可能是异步的
      //合并状态更新

      class Clock extends React.Component{

	      constructor(props){
	       super(props);
	       this.state = {date : new Date()};
	  	 }
         
    

         tick(){
             this.setState({
               date: new Date()
            });
        }

        //安装计时器 - 将组件输出呈现给DOM后运行。
	  	 componentDidMount(){
             
            /** 方式一 
             this.timerID = setInterval(
                 () => this.tick(),
                 1000
              );
              **/
            /**方式二**/
            let that = this;
           this.timerID = setInterval(function(){
             return that.tick();
           },1000)
	  	  }

	  	  //页面小时的时候取消计时器
		 componentWillUnmount() {
			    clearInterval(this.timerID);
	     }

	   

	  	 render(){
	  	   return(
              <div>
                    <h1> 现在为您报时：</h1>
                    <h2> 北京时间 {this.state.date.toLocaleTimeString()} </h2>
              </div>
	  	   );
	  	}

     }

      function App(){

         return(
              <div>
                 <Clock />
                 <Clock />
                 <Clock />
              </div>
          );

     }

     ReactDOM.render(
			  <App />,
			  document.getElementById('example')
		);
  

	</script>
</body>
</html>